<template>
    <el-menu :router="true" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse-transition="false"
        active-text-color="#ffd04b">
        <h3>游戏列表</h3>
        <el-menu-item :index="item.path+''" v-for="item in list" :key="item.label">
            <component class="icons" :is="item.icon"></component>
            <span>{{item.label}}</span>
        </el-menu-item>
    </el-menu>
</template>


<script>
export default {
    setup() {
        const list = [
            {
                path: '/home',
                name: 'home',
                label: '传统数字华容道',
                icon: 'user',
                url: '/home'
            },
            {
                label: '进阶华容道',
                name: 'other',
                icon: 'location',
                path: '/other',
                url: 'other'
            },
        ];
        return {
            list,
        }
    }
}
</script>

<style lang="less" scoped>
.icons {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}
.el-menu-vertical-demo {
    width: 100%;
    border-right: none;
    h3 {
        color: #fff;
        text-align: center;
        margin-top: 10px;
    }
}
</style>
